<template>
    <div style="padding:15px;background:#fff;border-radius: 10px;">
            <el-table
                class="custom-table"
                ref="multipleTable"
                :data="studentlist"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                @selection-change="handleSelectionChange"
                :header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="userNumber"
                    label="学号">
                </el-table-column>
                <el-table-column
                    prop="examNumber"
                    label="考号">
                </el-table-column>
                <el-table-column
                    label="姓名"
                    prop="studentname">
                </el-table-column>
                <el-table-column
                    label="学校"
                    prop="schoolname">
                </el-table-column>
                <el-table-column
                    label="班级"
                    prop="classname">
                </el-table-column>
                <el-table-column
                    label="考场"
                    prop="examRoomNumber">
                </el-table-column>
                <el-table-column
                    label="座号"
                    prop="seatNumber">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="120">
                    <template slot-scope="scope">
                        <div style="display: flex;" class="scopednr">
                            <b @click="editExamschool(scope.row)">编辑</b>
                            <b @click="deleteExamStudent(scope.row)">删除</b>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="examfooter">
                <div class="examFootercontent">
                    <div>
                        <span class="totaldata">共<i>{{total?total:0}}</i>条数据</span>
                    </div>
                    <div>
                        <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[20, 50,100]"
                            @size-change="handleSizeChange"
                            :page-size="pageNumber"
                            layout="sizes, prev, pager, next"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    props:{
        pageNumber:{
            type:Number,
            default:20
        },
        studentlist:{
            type:Array,
            default:()=>[]
        },
        total:{
            type:Number,
            default:0
        }
    },
    data(){
        return {
        }
    },
    methods:{
        handleCurrentChange(val){
            this.$emit('handleCurrentChange',val)
        },
        handleSizeChange(val){
            this.$emit('handleSizeChange',val)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit('handleSelectionChange',val)
        },
        editExamschool(row){
        	this.$emit('editExamschool',row)	
        },
        //单个删除
        deleteExamStudent(row){
            let studentid = [row.studentid]
        	this.$emit('deleteExamStudent',JSON.stringify(studentid))	
        }
    }
}
</script>

<style scoped>
.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
     .el-table .el-table__cell{
        padding:8px 0;
    }
    .examfooter{
		width:100%;
		height:54px;
		left:0;
		bottom:0;
	}
	.examFootercontent{
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
    .scopednr b{
        display: inline-block;
        font-weight:normal;
        margin:0 8px;
        color:#165DFF;
        cursor: pointer;
    }
    .scopednr b:last-child{
        color:#D54941
    }
</style>